<template>
    <div class="mall-layout-main">
        <div class="searchList_search-wrapper__s4iYF">
            <div class="searchList_search-content__O7iwM">
                <div class="sort_sort__S6324">
                    <div class="btn-item">默认</div>
                    <div class="btn-item">
                        <div>按销量</div>
                        <div style="display: flex;flex-direction: column;">
                            <i style="height: 8px;width: 8px;" class="el-icon-caret-top"></i>
                            <i style="height: 8px;width: 8px;" class="el-icon-caret-bottom"></i>
                        </div>
                    </div>
                    <div class="btn-item">
                        <div>按金额</div>
                        <div style="display: flex;flex-direction: column;">
                            <i style="height: 8px;width: 8px;" class="el-icon-caret-top"></i>
                            <i style="height: 8px;width: 8px;" class="el-icon-caret-bottom"></i>
                        </div>
                    </div>
                </div>
                <div class="searchList_search-box__TCd8L">
                    <div class="searchMenu_search-menu__jcmzt">
                        <div class="searchMenu_search-action__WaT66">
                            <span class="searchMenu_search-submit__uu529">筛选</span>
                            <a class="searchMenu_search-reload__GLDb-">
                                <i class="el-icon-refresh-right"></i>
                                <span>重置选项</span>
                            </a>
                        </div>
                        <ul>
                            <div v-for="item in 2">
                                <el-menu
                                    default-active="2"
                                    class="el-menu-vertical-demo"
                                    @open="handleOpen"
                                    @close="handleClose">
                                    <el-submenu index="1">
                                        <template slot="title">
                                        <span class="text-color">品牌</span>
                                        </template>
<el-menu-item-group>
    <el-menu-item index="1-1">选项1</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</div>
<div>
    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-submenu index="1">
            <template slot="title">
                                        <span class="text-color">价格过滤</span>
                                        </template>
            <el-menu-item-group>
                <div class="searchMenu_meun-price__ZlhiW">
                    <div style="display: flex;">
                        <div style="display: flex;align-items: center;">
                            <el-input style="width: 85px;" v-model="input" placeholder="最低价"></el-input>
                            <span>~</span>
                            <el-input style="width: 85px;" v-model="input" placeholder="最高价"></el-input>

                        </div>
                        <div class="searchMenu_search-btn-submit__Ni66i">确定</div>
                    </div>
                </div>
            </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
            <template slot="title">
                                        <span class="text-color">最小订单数</span>
                                        </template>
            <el-menu-item-group>
                <div style="display: flex;border: 1px solid #eee;">
                    <div style="display: flex;align-items: center;width: 179.58px;">
                        <el-input style="width: 100%;" v-model="input" placeholder="请输入数值"></el-input>
                    </div>
                    <div class="searchMenu_search-btn-submit__Ni66i">确定</div>
                </div>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</div>
</ul>
</div>
<div class="ant-spin-nested-loading" v-loading="loading">
    <div class="ant-spin-container">
        <div class="searchList_search-container__IusXt">
            <div class="searchList_search-list__Qq6Bz" v-if="goodlistdata.length">
                <div class="goods-desc-wrapper" v-for="(item,index) in goodlistdata" :key="index" @click="goDetail(item)">
                    <div style="width: 236px;height: 236px;">
                        <img style="width: 100%;height: 100%;" :src="item.big_img" alt="">
                    </div>
                    <div class="goods-desc-info">
                        <div class="info-name">
                            <span style="color: #333;">{{item.goods_name}}</span>
                        </div>
                        <div class="info-hot">
                            <div class="hot-price">
                                <span class="price-type">¥</span>
                                <span class="price">{{item.min_price}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="goods-desc-attr">
                        <div class="attr-item">国内仓发&保税仓发</div>
                        <div class="attr-hot">热度&nbsp;&nbsp;</div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="noCommodity">
                    <img src="../../assets/img/wushangpin.png" alt="暂无" />
                </div>
            </div>
        </div>
    </div>
    <div class="pagination" v-if="goodlistdata.length">
        <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[5,10]" :page-size="params.pageSize" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination> -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[12, 16, 20, 24]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</div>
</div>
</div>
</div>
<homefooter></homefooter>
</div>
</template>

<script>
    import homefooter from '../assembly/footer'
    export default {
        components: {
            homefooter
        },
        watch: {
            $route: {
                immediate: true,
                handler() {
                    if (this.$route.query) { //需要监听的参数
                        if (this.$route.query.category_id) {
                            this.params.category_id = this.$route.query.category_id
                        }
                        if (this.$route.query.search) {
                            this.params.search = this.$route.query.search
                        }
                        this.goodlist()
                    }
                }
            },
        },
        data() {
            return {
                loading: true,
                goodlistdata: [],
                input: '',
                params: {
                    category_id: '',
                    type_name: '',
                    search: '',
                    brand_id: '',
                    page: 1,
                    pageSize: 12,
                    min_price: '',
                    max_price: '',
                    sortPrice: false
                },
                total: 1
            }
        },
        // created() {
        //     console.log(123);
        //     if (this.$route.query.category_id) {
        //         this.params.category_id = this.$route.query.category_id
        //     }
        //     if (this.$route.query.search) {
        //         this.params.search = this.$route.query.search
        //     }
        //     this.goodlist()
        // },
        methods: {
            goodlist() {
                this.$HttpGet("/index.php?s=/admin/goods/index", this.params).then(res => {
                    // this.classIfyList = res.data;
                    console.log(res);
                    this.goodlistdata = res.data.data
                    this.total = res.data.total
                    this.loading = false
                })
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.params.pageSize = val
                this.goodlist()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.params.page = val
                this.goodlist()
            },
            goDetail(item) {
                console.log(item);
                // this.$router.push('detail?id=' + item.id)
                window.open('/#/index/commodity/detail?id=' + item.id)
            }
        },
        beforeDestroy() {
            console.log(9696969);
            this.params = {}
            console.log(this.params);
        }
    }
</script>

<style lang="scss" scoped>
    .mall-layout-main {
        min-height: calc(100vh - 200px);
        margin: 0 auto;
        padding-top: 24px;
        background-color: #fff !important;
    }
    
    .searchList_search-wrapper__s4iYF {
        width: 100%;
        padding-top: 8px;
        background-color: #fff;
    }
    
    .searchList_search-content__O7iwM {
        width: 1280px;
        margin: 0 auto;
        padding: 16px 0 125px;
    }
    
    .sort_sort__S6324 {
        display: flex;
        -ms-flex-pack: end;
        justify-content: flex-end;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .btn-item {
        padding: 4px 12px;
        font-size: 12px;
        display: flex;
        border: 1px solid #ccc;
        color: #666;
        border-radius: 3px;
        margin-left: 20px;
        cursor: pointer;
    }
    
    .searchList_search-box__TCd8L {
        display: flex;
        width: 1280px;
    }
    
    .searchMenu_search-menu__jcmzt {
        width: 230px;
        min-width: 230px;
        margin-right: 31px;
    }
    
    .searchMenu_search-action__WaT66 {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 25px;
        padding: 6px 0;
        background-color: #fff;
        border-bottom: 3px solid #333;
    }
    
    .searchMenu_search-submit__uu529 {
        font-weight: 600;
        font-size: 14px;
    }
    
    .searchMenu_search-reload__GLDb- {
        color: #999;
        font-size: 12px;
        vertical-align: middle;
        cursor: pointer;
    }
    
    /deep/.el-submenu__title {
        padding: 0 0;
        padding-left: 0 !important;
    }
    
    /deep/.el-submenu .el-menu-item {
        padding: 0 0;
        padding-left: 0 !important;
    }
    
    .searchMenu_meun-price__ZlhiW {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        height: 48px;
        overflow: hidden;
        font-weight: normal;
        font-size: 14px;
        border: 1px solid #eee;
        border-radius: 4px;
    }
    
    /deep/.el-input__inner {
        width: 100%;
    }
    /* /deep/.el-input {
        width: 85px !important;
    }
     */
    
    .searchMenu_search-btn-submit__Ni66i {
        color: #656eff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .text-color {
        color: #000;
        font-size: 14px;
        font-weight: 700;
    }
    
    .ant-spin-nested-loading {
        position: relative;
    }
    
    .ant-spin-container {
        position: relative;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    
    .searchList_search-container__IusXt {
        flex: 1 1;
        min-width: 1019px;
    }
    
    .searchList_search-list__Qq6Bz {
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    
    .goods-desc-wrapper {
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 236px;
        height: 342px;
        margin-right: 25px;
        margin-bottom: 30px;
        overflow: hidden;
        background-color: #fff;
        border: 1px solid transparent;
        cursor: pointer;
    }
    
    .goods-desc-info {
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        width: 100%;
        margin-top: 8px;
    }
    
    .info-name {
        display: -webkit-box;
        height: 44px;
        overflow: hidden;
        color: #333;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    
    .info-hot {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        margin-top: 8px;
        line-height: 14px;
    }
    
    .hot-price {
        color: #f44;
        font-weight: 600;
        font-size: 22px;
    }
    
    .price-type {
        margin-right: 2px;
        font-size: 12px;
    }
    
    .price {
        font-size: 18px;
    }
    
    .goods-desc-attr {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        height: 18px;
        margin-top: 10px;
    }
    
    .attr-item {
        width: 150px;
        height: 18px;
        margin-right: 6px;
        overflow: hidden;
        color: #666;
        font-size: 12px;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        border-radius: 1px;
    }
    
    .attr-hot {
        width: 78px;
        overflow: hidden;
        color: #999;
        font-size: 12px;
        white-space: nowrap;
        text-align: right;
        text-overflow: ellipsis;
        word-break: break-all;
    }
    
    .home-wrapper .page-main .item .goods-desc-wrapper {
        margin-right: 0;
    }
    
    .goods-desc-wrapper:nth-child(4n) {
        margin-right: 0 !important;
    }
    
    /deep/.el-pagination__editor.el-input .el-input__inner {
        border: 1px solid #ccc;
    }
    
    .pagination {
        display: flex;
        -ms-flex-pack: end;
        justify-content: flex-end;
        margin-top: 35px;
    }
    
    /deep/.el-pagination .el-select .el-input .el-input__inner {
        border: 1px solid #ccc;
        height: 28px;
    }
    
    /deep/.el-select {
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .noCommodity {
        display: flex;
        justify-content: center;
        margin-top: 90px;
    }
</style>